<script lang="ts">
import { defineComponent, ref, computed, watch } from "vue";
import { UserModule } from "@/store/modules/user";
import { getUserInfo, getParameter } from "@/api/nodeapi";
import { useI18n } from "vue-i18n";
import { showToast, showDialog, showConfirmDialog } from "vant";
import Clipboard from "clipboard";

export default defineComponent({
    setup() {
        const { t } = useI18n();

        const pageLoading = ref(true);
        const userInfo = ref({});
        const fromSun = computed(() => {
            return (data) => {
                return tronWeb.fromSun(data);
            };
        });
        const toSun = computed(() => {
            return (data) => {
                return tronWeb.toSun(data);
            };
        });
        const loadData = async () => {
            try {
                getUserInfo().then((res) => {
                    userInfo.value = res.data.data.UserInfo || {};
                });
                pageLoading.value = false;
            } catch (error) {}
        };
        const shareAddress = computed(() => {
            return (
                window.location.origin +
                "/#/node?referrer=" +
                userInfo.value.InvitationCode
            );
            return "";
        });
        const copy = async (id: string) => {
            const clipboard = new Clipboard(id);
            clipboard.on("success", () => {
                showToast({
                    message: t("layout.copySuccessfully"),
                    icon: "checked",
                    className: "_showToast",
                });
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                showToast(t("layout.fail"));
                clipboard.destroy();
            });
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            userInfo,
            shareAddress,
            fromSun,
            toSun,
            copy,
        };
    },
});
</script>

<template>
    <div class="main2">
        <div class="page">
            <div class="award">
                <div class="rowAward">
                    <div class="cell">
                        <div class="label">
                            <img
                                src="@/assets/image/USDT.svg"
                                alt=""
                                srcset=""
                            />USDT
                        </div>
                        <div class="value">{{ userInfo.USDT || 0 }}</div>
                    </div>
                    <div class="cell">
                        <div class="label">
                            <img
                                src="@/assets/logo3.png"
                                alt=""
                                srcset=""
                            />VTBK
                        </div>
                        <div class="value">{{ userInfo.VTBK || 0 }}</div>
                    </div>
                    <div class="cell">
                        <div class="label">
                            <img src="@/assets/logo3.png" alt="" srcset="" />TBK
                        </div>
                        <div class="value">{{ userInfo.TBK || 0 }}</div>
                    </div>
                </div>
                <div class="rowInvite">
                    <div class="name">{{ $t("menu.node") }}</div>

                    <div class="row">
                        <div class="cell">
                            <div>
                                <div class="label">
                                    {{ $t("layout.Mynode") }}
                                </div>
                                <div class="value">
                                    {{ userInfo.TotalNum || 0 }}
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div>
                                <div class="label">
                                    {{ $t("layout.Communitynode") }}
                                </div>
                                <div class="value">
                                    {{ userInfo.DownlineNum || 0 }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <clipboard-block />
                </div>
            </div>
            <van-tabs
                v-model:active="active2"
                class="tabsUser"
                shrink
                color="#EB0029"
            >
                <van-tab :title="$t('layout.Myinvitation')">
                    <get-directs-by-page />
                </van-tab>
                <van-tab :title="$t('layout.Earningsrecord')">
                    <get-reward-list />
                </van-tab>
            </van-tabs>
        </div>
    </div>
    <referrer-2 ref="referrer" />
</template>

<style lang="less" scoped>
.page {
    .award {
        .rowAward {
            display: flex;
            align-items: center;
            gap: 20px;
            .cell {
                flex: 1;
                padding: 24px;
                border-radius: 20px;
                border: 1px solid #ffccd5;
                background: #fff7f7;
                &:last-child {
                    margin-bottom: 0;
                }
                .label {
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    img {
                        margin-right: 4px;
                        width: 24px;
                        height: 24px;
                    }
                }
                .value {
                    margin-top: 8px;
                    color: #000;
                    font-size: 32px;
                    font-weight: 700;
                    line-height: 44px; /* 137.5% */
                }
                .van-button {
                    width: auto;
                    height: 40px;
                }
            }
        }
        .rowInvite {
            margin-top: 52px;
            .name {
                margin-bottom: 22px;
                color: #000;
                font-size: 20px;
                font-weight: 900;
            }

            .row {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
                gap: 20px;
                .cell {
                    padding: 37px 0;
                    flex: 1;
                    border-radius: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    color: #fff;
                    border-radius: 20px;
                    background: #eb0029;
                    .label {
                        font-weight: 400;
                        font-size: 20px;
                    }
                    .value {
                        margin-top: 15px;
                        font-size: 36px;
                        font-weight: 700;
                    }
                }
            }
        }
    }
    .tabsUser {
        margin-top: 80px;
        &:deep(> .van-tabs__wrap) {
            margin-bottom: 20px;
            border-bottom: 1px solid #d9d9d9;
            .van-tabs__nav {
                padding: 0;
                height: 46px;
                background: transparent;

                .van-tab {
                    // padding: 0 30px 0 0;
                    width: 160px;
                    font-size: 16px;
                    color: #000;

                    &.van-tab--active {
                        color: #eb0029;
                        font-weight: 700;
                    }
                }
                .van-tabs__line {
                    // display: none;
                    bottom: 1px;
                    left: 0;
                    width: 160px;
                }
            }
        }
    }
    @media (max-width: 1000px) {
        & {
            .award {
                .rowAward {
                    flex-wrap: wrap;
                    gap: 0;
                    .cell {
                        flex: 100% 0 0;
                        width: 100%;
                        box-sizing: border-box;
                        margin-bottom: 16px;
                        .label {
                        }
                        .value {
                            margin-top: 7px;
                            font-size: 24px;
                            line-height: 1;
                        }
                        .van-button {
                            width: auto;
                            height: 40px;
                        }
                    }
                }
                .rowInvite {
                    margin-top: 52px;
                    .name {
                        margin-bottom: 22px;
                        color: #000;
                        font-size: 20px;
                        font-weight: 900;
                    }

                    .row {
                        flex-wrap: wrap;
                        gap: 20px;
                        .cell {
                            > div {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            padding: 37px 0;
                            flex: 100% 0 0;
                            width: 100%;
                            .label {
                                font-size: 16px;
                            }
                            .value {
                                margin-top: 0;
                                margin-left: 12px;
                                font-size: 24px;
                            }
                        }
                    }
                }
            }
            .tabsUser {
                margin-top: 60px;
                &:deep(> .van-tabs__wrap) {
                    .van-tabs__nav {
                        .van-tab {
                            flex: 1;
                            width: auto;
                        }
                        .van-tabs__line {
                            width: 50%;
                        }
                    }
                }
            }
        }
    }
}
</style>
